<template>
  <div class="sample-tutorial">
    <gc-spread-sheets
      class="sample-spreadsheets"
      @workbookInitialized="initSpread"
    >
      <gc-worksheet
        :data-source="dataSource"
        :auto-generate-columns="autoGenerateColumns"
      >
        <gc-column
          :data-field="'Film'"
          :width="160"
        />
        <gc-column
          :data-field="'Genre'"
          :width="70"
        />
        <gc-column
          :data-field="'Lead Studio'"
          :width="90"
        />
        <gc-column
          :data-field="'Audience Score %'"
          :width="110"
        />
        <gc-column
          :data-field="'Profitability'"
          :width="80"
        />
        <gc-column :data-field="'Rating'" />
        <gc-column
          :data-field="'Worldwide Gross'"
          :width="110"
        />
        <gc-column :data-field="'Year'" />
      </gc-worksheet>
    </gc-spread-sheets>
  </div>
</template>

<script setup lang="ts">
import '@grapecity/spread-sheets-vue'
import GC from '@grapecity/spread-sheets'
import '@grapecity/spread-sheets-resources-zh'

import { Ref, ref, computed } from 'vue'
import { getData } from './data'
GC.Spread.Common.CultureManager.culture('zh-cn')

const autoGenerateColumns = ref(true)
const dataSource = computed(() => getData())
const initSpread = (spread: { setSheetCount: () => void }) => {
  spread.setSheetCount()
}

</script>
<style>
.sizedLabel {
   display: inline-block;
   width: 150px;
}

.colorLabel {
   background-color: #F4F8EB;
}

input[type="text"] {
   width: 100px;
}

input[type="button"] {
   width: 60px;
   margin: 0 10px;
}
.sample-tutorial {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.sample-spreadsheets {
   width: calc(100% - 280px);
   height: 50vh;
   overflow: hidden;
   float: left;
}

.options-container {
   float: right;
   width: 280px;
   padding: 12px;
   height: 100%;
   box-sizing: border-box;
   background: #fbfbfb;
   overflow: auto;
}

.option-row {
   font-size: 14px;
   padding: 5px;
}

label {
   margin-bottom: 6px;
}

input {
   padding: 4px 6px;
}

hr {
   border-color: #fff;
   opacity: .2;
   margin-top: 20px;
}

body {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
}
</style>
